<template>
  <!-- 卡包-核销明细 -->
  <u-dialog :title="title" :show.sync="show" width="1300px" :auto-close="false" :footer="false" @cancel="cancel" @confirm="confirm">
    <u-table
      :data="list"
      :loading="listLoading"
      :options="listOptions"
      :columns="columns"
      :page="false"
    >
      <template v-slot:right>
        <el-table-column label="操作" align="center" fixed="right">
          <template v-if="row.type === '1'" slot-scope="{ row }">
            <el-button v-if="!row.cancel" type="text" @click="handleCouponConsumeCancel(row)">撤销</el-button>
          </template>
        </el-table-column>
      </template>
    </u-table>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 卡包-核销明细
 */
export default {
  name: 'CouponRecord',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          member_name: ''
        })
      }
    },
    /** 是否卡劵 */
    card: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      api: this.$u.api.MarketCouponCard,
      // 表格
      columns: [
        {
          prop: 'type',
          label: '操作类型',
          width: '90',
          render: (h, params) => {
            const { type } = params.row
            return h('el-tag', { props: { effect: 'plain' }}, this.typeList.find(item => item.value === type).label)
          }
        },
        {
          prop: 'createDate',
          label: '交易时间',
          width: '160'
        },
        {
          prop: 'orderNo',
          label: '订单号',
          width: '200'
        },
        {
          prop: 'orderId',
          label: '通联订单号',
          width: '200'
        },
        {
          prop: 'tranNo',
          label: '通联流水号',
          width: '200'
        },
        {
          prop: 'couponNo',
          label: '劵号',
          width: '200'
        },
        {
          prop: 'couponName',
          label: '名称',
          width: '160'
        },
        {
          prop: 'templateId',
          label: '模板ID'
        },
        {
          prop: 'balance',
          label: '金额/次',
          render: (h, params) => {
            const { balance, couponType } = params.row
            const unit = couponType === 2 ? '次' : '元'
            return h('span', { style: { fontWeight: 'bold', color: '#4CAF50 !important' }}, balance + unit)
          }
        },
        {
          prop: 'openid',
          label: 'OPENID',
          width: '250'
        },
        {
          prop: 'createUserSysno',
          label: '收银员ID'
        },
        {
          prop: 'createUserName',
          label: '收银员名称',
          width: '150'
        },
        {
          prop: 'shopName',
          label: '门店',
          width: '150'
        }
      ],
      list: [],
      // 加载数据加载状态
      listLoading: false,
      listOptions: {
        mutiSelect: false,
        stripe: true
      },
      listQuery: {
        couponNo: ''
      },
      // 操作类型
      typeList: [{ value: '1', label: '核销' }, { value: '2', label: '作废' }, { value: '3', label: '反核销' }],
      title: '核销明细'
    }
  },
  watch: {
    show(newVal) {
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        const { couponno } = this.data
        this.title = '核销明细：查询【' + couponno + '】'
        this.listQuery.couponNo = couponno
        this.handleCouponRecordList()
      }
    }
  },
  created() {
    if (this.card) {
      this.api = this.$u.api.MarketCouponCardsingle
    }
  },
  methods: {
    // 获取列表数据
    handleCouponRecordList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      // 查询分页数据
      self.api.consumerecord(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data

        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 优惠券核销撤销
    handleCouponConsumeCancel(row) {
      const self = this
      // 模态对话框组件
      self.$confirm('此操作将【' + row.orderNo + '】核销记录撤销，是否继续核销？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        // 处理确认事件
        self.api.consumecancel(row).then(() => {
          // 通知信息
          self.$u.msg('操作优惠券核销记录撤销成功')
          // 双向绑定数据
          self.$emit('changeShow', false)
          // 更新成功后传递
          self.$emit('change')
        })
      }).catch(() => {
      })
    },
    // 确认
    confirm() {
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>

.orderinfo{
  width: 100%;
  display: flex;
  border: 1px solid #dfe6ec;
}

.goodinfolist{
  width: 70%;
  border-right:2px solid #dfe6ec ;
}
.goodinfotitle{
  padding: 5px;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #d5dbe7;
}
.goodinfotitle span {
  width:25%;
}
.goodinfo{
  padding: 5px;
  text-align: center;
  display: flex;
  height: 30px;
}
.goodinfo div{
  padding: 2px;
  width:20%;
  border-bottom: 1px solid #dfe6ec;
}
.payinfolist{
  width: 30%;
}
.payinfotitle{
  padding: 5px;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #d5dbe7;
}
.payinfotitle span {
  width:50%;
}
.payinfo{
  padding: 5px;
  text-align: center;
  display: flex;
  height: 30px;
}
.payinfo div{
  padding: 2px;
  width:50%;
  border-bottom: 1px solid #dfe6ec;
}
</style>
